<template>
  <div class="history">
    <!-- 置顶列表 -->
    <div v-if="lightNum===0">
      <div v-for="(item,index) in list" :key="index">
        <div :class="[item.istop ? 'bg-dark ' : 'bg-light' , 'container1']">
          <div class="chatBox flex" :class="hightId===item.id?'bg-light':'bg-dark'" @click="onClick(item,index)">
            <div class="flex  align-center justify-center position-relative" >
              <el-image style="width: 50px; height: 50px;border-radius:50%;border: 1px solid #C4C4C5" :src='item.otherAvatar'>
                <div slot="error" class="flex align-center justify-center " >
                  <i class="el-icon-user" style="font-size: 32px;line-height: 50px"></i>
                </div>
              </el-image>

              <free-badge badgeClass="position-absolute" badgeStyle="top:-6px;right:-10px" v-if="item.noreadnum"
                          :value="item.noreadnum"></free-badge>
            </div>
            <div class="chatRight">

              <div class="first mb-1  text-light-muted flex justify-between">
                <div></div>
                <div> {{ item.update_time|formatTime }}</div>

              </div>
              <div class="two flex justify-between text-light-muted">
                <div class="twoLeft text-ellipsis ">{{ item.data }}</div>
                <div class="twoRight ">
                  <el-dropdown @command="handleCommand" trigger="click">
                    <span class="el-dropdown-link">
                      设置<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="delChat">不显示聊天</el-dropdown-item>
                      <el-dropdown-item command="delChatDetail">删除聊天</el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                </div>

              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <div v-if="lightNum===1">
      <div v-for="(item,index) in expertList" :key="index">
        <div :class="'container1'" v-if="item.wssUuid!==user.wssUuid">
          <div class="chatBox flex" :class="hightId===item.wssUuid?'bg-light':'bg-dark'" @click="onClickExpert(item,index)">
            <div class="flex  align-center justify-center position-relative">
              <el-image style="width: 50px; height: 50px;border-radius:50%;border: 1px solid #C4C4C5" :src='item.otherAvatar'>
                <div slot="error" class="flex align-center justify-center " >
                  <i class="el-icon-user" style="font-size: 32px;line-height: 50px"></i>
                </div>
              </el-image>

            </div>
            <div class="chatRight">
              <div class="first mb-1 text-light-muted">
                {{ item.nickName}}
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <div v-if="lightNum===2">
      <div v-for="(item,index) in patientList" :key="index">
        <div :class="'container1'" v-if="item.wssUuid!==user.wssUuid">
          <div class="chatBox flex" :class="hightId===item.wssUuid?'bg-light':'bg-dark'" @click="onClickExpert(item,index)">
            <div class="flex  align-center justify-center position-relative">
              <el-image style="width: 50px; height: 50px;border-radius:50%;border: 1px solid #C4C4C5" :src='item.otherAvatar'>
                <div slot="error" class="flex align-center justify-center " >
                  <i class="el-icon-user" style="font-size: 32px;line-height: 50px"></i>
                </div>
              </el-image>

            </div>
            <div class="chatRight">
              <div class="first mb-1 text-light-muted">
                {{ item.patientName}}
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>


    <!-- 非置顶列表 -->
    <!--        <div v-for="(item,index) in list" :key="index">-->
    <!--            <free-media-list v-if="!item.istop" :item="item" :index="index" @long="long"></free-media-list>-->
    <!--        </div>-->


  </div>
</template>

<script>

import freeBase from "@/utils/mixin/free-base.js"
import freeBadge from "@/views/wechatWorkstation/chat/free-badge.vue"
import {getConsolutionExpert, listUser} from '@/api/system/user'
import {
  mapState
} from 'vuex'
import {listVisitTip} from "@/api/patientRegistration/registrationList";

export default {
  mixins: [freeBase],
  components: {
    freeBadge
  },
  props:{
    lightNum: {
      type: Number,
      default: 0,
    },
    patientName: {
      type: String,
      default: '',
    }

  },
  data() {
    return {
      list: [], //消息列表
      hightId: '',
      expertList:[],//专家列表
      user: {},
      // 查询参数
      queryParams: {
        hospitalId: undefined,
        deptId: undefined,
        isPatient:'',
      },
      patientList:[],//顾客列表


    }
  },

  computed: {
    ...mapState({
      currentList: state => state.user.chatList,
      totalNoreadnum: state => state.user.totalNoreadnum,
      chat: state => state.user.chat
    }),
    // 动态获取菜单高度
    getMenusHeight() {
      let H = 100
      return this.menus.length * H
    },
    // 获取菜单的样式
    getMenusStyle() {
      return `height: ${this.getMenusHeight}rpx;`
    },


  },
  watch: {
    currentList(newVal, oldVal) {
      this.list=newVal
      this.list.forEach(item=>{
        item.otherAvatar=process.env.VUE_APP_BASE_API +item.avatar
      })
    },

  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem('user'))
    this.list = this.chat.getChatList()
    this.list.forEach(item=>{
      item.otherAvatar=process.env.VUE_APP_BASE_API +item.avatar
    })
    this.getConsolutionExpert()


  },
  methods: {
    onClick(item, index) {
      console.log('onClick',item)
      this.hightId=item.id
      this.$store.commit('SET_CHATOBJ', item)
      this.$emit('getItem',item)
      this.chat.readChatItem(item.id, item.chat_type)
    },
    onClickExpert(item, index){
      console.log('onClickExpert',item)
      this.hightId=item.wssUuid
      this.$store.commit('SET_CHATOBJ', item)
      this.$emit('getItem',item)
      this.chat.readChatItem(item.wssUuid,"user")
    },
    handleCommand(command) {
      if(command==='delChat'){
        this.delChat()   // 不显示聊天
      }else if(command==='delChatDetail'){
        this.delChatDetail()  // 删除聊天
      }
      this.hightId=''
      this.$store.commit('SET_CHATOBJ', '')
      this.$emit('getItem','')

    },
    // 删除当前会话
    delChat() {
      let item=this.list.find(item=>{
        return item.id===this.hightId
      })
      this.chat.removeChatItem(item.id, item.chat_type)
    },
    // 删除当前会话详情
    delChatDetail() {
      let item=this.list.find(item=>{
        return item.id===this.hightId
      })
      this.chat.clearChatDetail(item.id, 'user')
    },
    // 置顶/取消置顶会话
    // setTop() {
    //   let item = this.list[this.propIndex]
    //   item.istop = !item.istop
    // },
    // 获取顾客登记列表
    getPatientList() {
      if (this.patientName ) {
        listVisitTip({
          pageNum: 1,
          pageSize: 9999,
          patientName:this.patientName,
        }).then(
          (response) => {
            this.patientList = response.rows;
          }
        );
      }else{
        this.patientList=[]
      }


    },
    getConsolutionExpert() {
      listUser({
        pageNum: 1,
        pageSize: 9999,
        status:0,
      }).then( (response) => {
         if(response.code==200){
           this.expertList = response.rows;
           if (this.expertList.length>0){
             this.expertList.forEach(item=>{
               item.otherAvatar=process.env.VUE_APP_BASE_API +item.avatar
             })

           }

         }
        }

      );
    },
    // getConsolutionExpert(){
    //   let hospitalId=JSON.parse(localStorage.getItem('hospital')).deptId
    //   getConsolutionExpert(hospitalId).then(response=>{
    //       if(response.code==200){
    //         // console.log('getConsolutionExpert',response)
    //         this.expertList=response.data
    //         this.expertList.forEach(item=>{
    //           item.otherAvatar=process.env.VUE_APP_BASE_API +item.avatar
    //           if (item.remark) {
    //             let description = item.remark
    //             description = description.replace(/(\n)/g, "");
    //             description = description.replace(/(\t)/g, "");
    //             description = description.replace(/(\r)/g, "");
    //             description = description.replace(/<\/?[^>]*>/g, "");
    //             description = description.replace(/&nbsp;/ig, ",");
    //             description = description.replace(/\s*/g, "");
    //             item.indec = description
    //             // console.log('description--',description)
    //           }
    //         })
    //
    //       }
    //     }
    //   )
    // },

  },
}
</script>

<style scoped lang="scss">
.history {
  .container1 {
    .chatBox {
      border-bottom: 1px solid #C4C4C5;
      padding: 10px 10px;
      //box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
      //border-radius: 10px;
      //margin: 3px 0;
      //border-bottom: 1px solid #000;

      .chatRight {
        width: 80%;
        .first {
          font-size: 12px;
          text-align: right;
        }

        .two {
          font-size: 16px;
          margin-left: 2px;
          .twoLeft{
            width: 75%;
          }
          ::v-deep .twoRight{
            font-size: 12px;
            .el-dropdown-link {
              cursor: pointer;
              color:  #A9A5A0;
              font-size: 12px;

            }
            .el-icon-arrow-down {
              font-size: 12px;
            }
          }
        }
      }
    }



  }

}


</style>
